<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
     // 创建图表实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项
var option = {
    tooltip: {
        // show:true,
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        },
        // triggerEvent: true, // 设置 tooltip 可以被点击
    },
    xAxis: {
        data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"]
    },
    yAxis: {},
    series: [
        {
            name: 'Series A',
            type: 'line',
            data: [20, 40, 30, 50, 60, 70, 80]
        },
        {
            name: 'Series B',
            type: 'line',
            data: [50, 30, 60, 70, 40, 90, 20]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 监听 tooltip 的 click 事件
myChart.on('click', function (params) {
    // console.log(343565);
   setTimeout(()=>{
     
    var newOption = myChart.getOption();
    newOption.tooltip[0].show = !newOption.tooltip[0].show;
    newOption.tooltip[0].axisPointer.show = false
    newOption.tooltip[0].showContent = false
    
    console.log(newOption)
    myChart.setOption(newOption);
   },1000)
});

// 初始状态隐藏辅助线
myChart.setOption({
    tooltip: {
        axisPointer: {
            show: false
        }
    }
});


    </script>
</body>

</html>